<template>
	<view class="container">
		<view class="ic"> <img src="@/static/shuxian.png" alt="" /> </view>
		<view class="context"> <text>精选</text> </view>
		<view class="ic2"> <img src="@/static/da.png" alt="" /> </view>
	</view> <scroll-view scroll-y="true" class="boxcontainer">
		<view class="box"> <img src="@/static/content/z.jpg" alt="" /> </view>
		<view class="box" @click="to3d()"> <img src="@/static/content/w.jpg" alt="" /> </view>
		<view class="box"> <img src="@/static/content/y.jpg" alt="" /> </view>
		<view class="box"> <img src="@/static/content/p.jpg" alt="" /> </view>
		<view class="box"> <img src="@/static/content/j.jpg" alt="" /> </view>
		<view class="box"> <img src="@/static/content/s.jpg" alt="" /> </view>
	</scroll-view>
</template>
<script setup>
	function to3d(){
		uni.navigateTo({
			url:'/pages/exhibit/exhibit'
		})
	}
	</script>
<style scoped>
	.boxcontainer {
		height: 377px;
		width: 100%;
		padding: 20rpx 0;
	}

	.container {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-left: 10px;
	}

	.ic {
		width: 27px;
		height: 22px;
		margin-top: 5px;
	}
	.ic img{
		width: 100%;
		height: 100%;
	}

	.ic2 {
		background-color: pink;
		border-radius: 70%;
		width: 22px;
		height: 22px;
		margin-top: 5px;
		position: absolute;
		left: 325px;
	}
	.ic2 img{
		width: 100%;
		height: 100%;
	}

	.box {
		position: relative;
		display: inline-block;
		width: 156px;
		height: 156px;
		border-radius: 7%;
		overflow: hidden;
		margin-bottom: 6px;
		margin-left: 20px;
		background: #f8f8f8;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.box:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	}

	.box img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		image-rendering: -webkit-optimize-contrast;
		backface-visibility: hidden;
	}

	.context {
		text-align: left;
		font-size: 22px;
		font-weight: 600;
		color: #333;
		margin-left: 10px;
	}

	@media (max-width: 768px) {
		.box {
			width: 140px;
			height: 140px;
			margin-left: 15px;
		}

		.ic2 {
			left: 85%;
		}
	}
</style>